<template>
  <Teleport v-if="isMounted" :to="`#${renderId}`">
    <el-time-picker
      class="common-time-picker"
      ref="CommonTimePicker"
      v-bind="attrs"
      v-model="modelValue"
      :key="renderId"
      @change="change"
      @blur="blur"
    >
    </el-time-picker>
  </Teleport>
</template>

<script>
  export default {
    name: 'CommonTimePicker',
    components: {},
    data() {
      return {
        visible: false, // 当前下拉框显隐状态
        renderId: 'common-container', // 传送到的目标元素id
        modelValue: [],

        curInstance: null, // 当前绑定在使用公用组件的实例
        attrs: {},
        isMounted: false,
      };
    },
    mounted() {
      this.isMounted = true;
    },
    methods: {
      change(val) {
        this.curInstance.updateValue(val);
      },
      blur() {
        this.visible = this.$refs['CommonTimePicker'].visible;
      },
      async toggleMenu({ renderId, curInstance, attrs, curValue }) {
        // // 重复点击做处理
        // if(this.renderId === renderId) {
        //   if (this.visible) {
        //     this.visible = false
        //     return
        //   }
        // }

        this.attrs = attrs;
        this.modelValue = curValue;
        this.renderId = renderId;
        this.curInstance = curInstance;

        await this.$nextTick();
        this.$refs['CommonTimePicker'].handleOpen();
      },
    },
  };
</script>

<style lang="scss"></style>
